<template>
    <div class="song-list-album">
        <div class="album">
            <div class="album-img">
                <img :src="tempList.pic" />
            </div>
            <div class="underImg">
                <!-- 歌单评分 -->
                <div class="mui-icon mui-icon-starhalf album-score">
                    <span>{{ average * 2 }}</span>
                </div>
                <div class="album-title">
                    {{ tempList.title }}
                </div>
                <!-- 歌曲简介 -->
                <div
                        class="mui-table-view-cell mui-collapse album-info"
                        :class="{ 'mui-active': isActive }"
                        @click="handleChangeView()"
                >
                    <a class="mui-navigate-right" href="#">{{ tempList.introduction }}</a>
                    <div class="mui-collapse-content">
                        {{ tempList.introduction }}
                    </div>
                </div>
                <div class="songs-body">
                    <album-content :songList="listOfSongs"> </album-content>
                </div>
                <div></div>
                <!-- 我的评分 -->
                <div @click="setRank" class="my-score">
                    <el-rate v-model="rank" allow-half show-text></el-rate>
                </div>
                <comment :playId="songListId" :type="1"></comment>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from "mint-ui";
    import { mixin } from "../minx/index";
    import { mapGetters } from "vuex";
    import {listSongDetail, songOfSongId, setRank, getRankOfSongListId,} from "../utils/index";
    import axios from "axios";
    import AlbumContent from "../components/AlbumContent";
    import Comment from "../components/Comment";

    export default {
        name: "SongListAlbum",
        mixins: [mixin],
        components: {
            AlbumContent,
            Comment,
        },
        data() {
            return {
                songLists: [], //当前页面需要展示的歌曲列表
                songListId: "", //前面传来的歌单id
                average: 0, //平均分
                rank: 0, //提交评价的分数
                isActive: false, //是否显示歌曲介绍
            };
        },
        computed: {
            ...mapGetters([
                "listOfSongs", //当前播放列表
                "tempList", //当前歌单对象
                "loginIn", //用户是否已登录
                "userId", //当前登录用户id
            ]),
        },
        created() {
            this.songListId = this.$route.params.id;
            this.getSongId();
            this.getRank(this.songListId);
        },
        methods: {
            // 点击切换折叠面板样式
            handleChangeView() {
                if (this.isActive) {
                    this.isActive = false;
                } else {
                    this.isActive = true;
                }
            },
            //获取当前歌单的歌曲列表
            getSongId() {
                axios.get("http://localhost:8888/listSong/detail",{params:{songListId:this.songListId}}).then(res => {
                    console.log(res.data)
                    for (let item of res.data) {
                        this.getSongList(item.songId);
                    }
                    this.$store.commit("setListOfSongs", this.songLists);
                }).catch(err => {
                        console.log(err)
                    }
                )
                //listSong/detail?songListId=${songListId}
                // listSongDetail(this.songListId)
                //     .then((res) => {
                //         for (let item of res) {
                //             this.getSongList(item.songId);
                //         }
                //         this.$store.commit("setListOfSongs", this.songLists);
                //     })
                //     .catch((err) => {
                //         console.log(err);
                //     });
            },
            //根据歌曲id获取歌曲信息
            getSongList(id) {
                axios.get("http://localhost:8888/song/detail",{params:{songId:id}}).then(res => {
                    console.log(res.data)
                    this.songLists.push(res.data);
                }).catch(err => {
                        console.log(err)
                    }
                )
                //song/detail?songId=${id}
                // songOfSongId(id)
                //     .then((res) => {
                //         this.songLists.push(res);
                //     })
                //     .catch((err) => {
                //         console.log(err);
                //     });
            },
            //获取歌单评分
            getRank(id) {
                axios.get("http://localhost:8888/rank",{params:{songListId:id}}).then(res => {
                    console.log(res.data)
                    this.average = res.data / 2;
                }).catch(err => {
                        console.log(err)
                    }
                )
                // /rank?songListId=${songListId}
                // getRankOfSongListId(id)
                //     .then((res) => {
                //         this.average = res / 2;
                //     })
                //     .catch((err) => {
                //         console.log(err);
                //     });
            },
            //提交评分
            setRank() {
                if (this.loginIn) {
                    let params = new URLSearchParams();
                    params.append("songListId", this.songListId);
                    params.append("consumerId", this.userId);
                    params.append("score", this.rank * 2);
                    setRank(params)
                        .then((res) => {
                            if (res.code == 1) {
                                Toast("评分成功");
                                this.getRank(this.songListId);
                            } else {
                                Toast("评分失败");
                            }
                        })
                        .catch((err) => {
                            Toast("您已经评价过啦");
                        });
                } else {
                    this.rank = null;
                    Toast("请先登录");
                }
            },
        },
    }
</script>

<style lang="scss" scoped>
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // 标题
    .song-list-album {
        text-align: left;
    .album {
    img {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .album-img {
        position: relative;
    // 饱和度滤镜
    filter: brightness(50%);
    }
    .underImg {
        position: absolute;
        z-index: 20;
        top: 7em;
        background: #fff;
        width: 100%;
        padding: 1.5em 1em 0 1em;
        border-radius: 1.5em 0 0 0;
        padding-bottom: 50px;
    // 歌曲简介
       .mui-table-view-cell{
           margin-left: -1em;
       }
    .album-info{
        font-size: .75em;
        color:$color-grey;
    }
    // 歌曲评分
       .album-score {
           position: absolute;
           right: 2em;
           top: 0.5em;
           color: $color-grey;
           font-size: 0.8em;
    span {
        font-size: 0.8em;
    }
    }
    .album-title {
        font-size: 1.25em;
        color: $color-black;
        line-height: 1em;
        font-weight: bolder;
    }
    .my-score {
        margin-bottom: 0.5em;
    }
    }
    }
    }


</style>
